<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="./css/layui.css" />
 <script src="./layui.js" nonce="EDNnf03nceIOfn39fn3e9h3s111"></script>
</head>
<body>

    <form class="layui-form" action="" lay-filter="inputForm">
        <textarea id="inputSql" name="inputSql" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
        <button type="button" class="layui-btn layui-btn-fluid" id="queryBut">查询</button>
    </form>
    <div class="layui-fluid">  
        <div class="layui-row">
          <div id="popInfo" class="layui-col-md12">
          </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md12">
                <table class="layui-hide" id="test"></table>
            </div>
        </div>
    </div>
    
    <script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">
    var table = null;
    layui.use(['jquery', 'layer','form','table'], function(){ 
        var $ = layui.$ //重点处
        ,layer = layui.layer;
        var form = layui.form,
        layedit = layui.layedit;
        table = layui.table;
    
        tableIns = table.render({
            elem: '#test'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,data:[
                    ]
                ,cols: [[
                        {field: 'id', title: '字段', width:80, sort: true, fixed: 'left'}
                    ]
                ]
        });

        $('#queryBut').click(function(){
            var data = $("#inputSql").val();
            $("#popInfo").innerText = "查询中。。。";
            window.parent.postMessage(data, '*');

            // $.ajax({
            //     type: "POST",
            //     url: 'http://127.0.0.1/test/api',
            //     data: data,
            //     success: function(rsp,s){
            //         console.log(rsp);
            //         let newtable = parseTable(testData1);
            //         console.log(newtable)
            //         table.reload('test', newtable, false)
            //     }
            // });
        });
    });

    function parseColsProperties(datas){
        let set =new Set();

        for(let item in datas){
            let arrayItem = Object.getOwnPropertyNames(datas[item]);
            arrayItem.forEach((name) =>{set.add(name)})
        }
        return set;
    }

    function parseCols(set){
        let arrayTitle = new Array();
        set.forEach((v, i, s) => {
            let item = {
                field : v,
                title : v,
                sort: true
            }
            arrayTitle.push(item);
        });
        let arrayTitle2 = new Array();
        arrayTitle2.push(arrayTitle);
        return arrayTitle2;
    }

    function parseTable(data){
        let colsItems = parseCols(parseColsProperties(data));
        let option = {
            elem: '#test'
            ,cellMinWidth: 280 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,data:data
            ,cols: colsItems
            ,toolbar: 'default'
            ,limit: data.length+1
        }
        return option;
    }

    window.addEventListener("message", (event) => {
        console.log('iframe收到消息');
        console.log(event);
        if(event.data.msg.resp=='error' || event.data.msg.resp.code){
            document.getElementById("popInfo").innerText = "查询失败";
            layer.msg('查询失败');
            return;
        }
        document.getElementById("popInfo").innerText = "查询成功";
        let newtable = parseTable(event.data.msg.resp);
        console.log(newtable)
        table.reload('test', newtable, false)
    }, false);

    </script>
</body>
</html>